<template>
  <a-cascader
    style="width:100%;"
    :options="options"
    :value="setValue"
    :load-data="loadData"
    :changeOnSelect="true"
    :placeholder="placeholder"
    change-on-select
    @change="onChange"
    @popupVisibleChange="onExpand"
  />
</template>
<script>
import { getLicenseByPid } from '@/views/app/biz/regisLicense/regisLicense'

export default {
  props:{
    placeholder:{
        type:String,
        default:'请选择'
    },
    value:{
        type:Array,
        default:() => {return ['f11','s11','t22']}
    }
  },
  data() {
    return {
      options: [],
      setValue:[]
    }
  },
  watch:{
    value:{
      handler(val, oldVal){
          console.log(val);
          this.setValue=[...val]
          if (val[0]!==oldVal[0]||val[1]!==oldVal[1]||val[2]!==oldVal[2]) {
            this.init(val)
          }
          
      },
      deep:true //true 深度监听
      
    }
  },
  created(){
    this.init(this.value)
    //  this.loadLevel1()
  },
  methods: {
    init(val){
      console.log(val);
      //如果一级有值，则请求一级菜单（请求列表后自动指定选中值）
      this.loadLevel1(val)
      
    },
    async loadLevel1(val){
      let res = await getLicenseByPid('3840298402834759845')
      res=[
        {level:1,value: 'f11',label: 'f1',isLeaf: false,},
        {level:1,value: 'f22',label: 'f2',isLeaf: false,},
        {level:1,value: 'f33',label: 'f3',isLeaf: false,},
        {level:1,value: 'f44',label: 'f4',isLeaf: false,},
      ]
      this.options=res
      this.setValue=[...val]
      //如果二级有值，则请求对应一级的二级菜单（请求列表后自动指定选中值）
      if(val[1]){
        this.loadLevel2(val,val[0])
      }
    },
    async loadLevel2(val,level1){ 
      let res = await getLicenseByPid('3840298402834759845')
      res=[
        {level:2,value: 's11',label: 's1',isLeaf: false,},
        {level:2,value: 's22',label: 's2',isLeaf: false,},
        {level:2,value: 's33',label: 's3',isLeaf: false,},
        {level:2,value: 's44',label: 's4',isLeaf: false,},
      ]
      console.log(this.options);
      for (let item1 of this.options) {
        //查找所属一级分类
        if (item1.value==level1) {
          item1.children=res
          this.options = [...this.options]
          this.setValue=[...val]
          //如果三级级有值，则请求对应一二级的三级菜单（请求列表后自动指定选中值）
          if(val[2]){
            this.loadLevel3(val,val[0],val[1])
          }
        }
      }
    },
    async loadLevel3(val,level1,level2){
      let res = await getLicenseByPid('3840298402834759845')
      res=[
        {level:3,value: 't11',label: 't1',isLeaf: true,},
        {level:3,value: 't22',label: 't2',isLeaf: true,},
        {level:3,value: 't33',label: 't3',isLeaf: true,},
        {level:3,value: 't44',label: 't4',isLeaf: true,},
      ]
      for (let item1 of this.options) {
        //查找所属一级分类
        if (item1.value==level1) {
          for (let item2 of item1.children) {
             console.log(item2);
            //查找所属二级分类
            if (item2.value==level2) {
              item2.children=res
              this.options = [...this.options]
              this.setValue=[...val]
            }
          }
        }
      }
      console.log(this.options);
    },
    onExpand(){},
    onChange(value,selectedOptions) {
      console.log(value)
      this.setValue=value
      if(selectedOptions){
        this.loadData(selectedOptions)
      }
    },
    loadData(selectedOptions) { //selectedOptions为当前点击的目标数组，包括父级
      console.log(selectedOptions)
      const lastTargetOption = selectedOptions[selectedOptions.length - 2] //获取当前点击的option的上一级
      const targetOption = selectedOptions[selectedOptions.length - 1] //获取当前点击的option
      console.log(lastTargetOption)
      this.loadCategory(targetOption,'',false)
      // if(targetOption.level==1){  //如果isLeaf为false,请求二级
      //   this.loadCategory(targetOption,'2',false)
      // }else if(targetOption.level==2){  //如果isLeaf为false,请求三级
      //   this.loadCategory(targetOption,'3',true)
      // }
      
    },
    async loadCategory(targetOption,level,noChild){
      targetOption.loading = true
      let res = await getLicenseByPid('3840298402834759845')
      res=[
        {level:level,value: `${targetOption.value}1`,label: `${targetOption.label}1`,isLeaf: noChild,},
        {level:level,value: `${targetOption.value}2`,label: `${targetOption.label}2`,isLeaf: noChild,},
        {level:level,value: `${targetOption.value}3`,label: `${targetOption.label}3`,isLeaf: noChild,},
        {level:level,value: `${targetOption.value}4`,label: `${targetOption.label}4`,isLeaf: noChild,},
      ]
      // if (res && res.code && res.code === 'C1' && res.data) {
        targetOption.children =res
        targetOption.loading = false
        this.options = [...this.options]
      // } else {
      //   console.log('请求失败');
      //   targetOption.loading = false
      //   targetOption.isLeaf = true
      // }
      
    }
  },
}
// 请求分类需求1
// 传入单个分类标识 cate1 查找子分类 ,请求以下数据
// res=[
//       {
//         value: 'cate11',  //分类标识
//         label: '11',   //显示值
//         isLeaf: true,  //是否有子分类
//       },
//       {
//         value: 'cate12',  //分类标识
//         label: '12',   //显示值
//         isLeaf: true,  //是否有子分类
//       },
//     ]

// 请求分类需求2
// 传入数组分类标识['cate1','cate12','cate121'] 查找同级分类 请求以下数据
// res=[
//       {
//         value: 'cate1',  
//         label: '1',   
//         isLeaf: false, 
//         children:[
//           {value: 'cate11',label: '11',isLeaf: false,},
//           {
//             value: 'cate12',  
//             label: '12',   
//             isLeaf: false, 
//             children:[
//               {value: 'cate121', label: '121',  isLeaf: true, },
//               {value: 'cate122', label: '122',  isLeaf: true, },
//             ]
//           },
//         ]
//       },
//       {value: 'cate2',label: '2', isLeaf: false,},
//     ]
</script>
